<template>
    <div class="detail-content">
      <h2>智能查看</h2>
      <el-divider/>
      <el-row :gutter="20">
        <el-col :span="12">
          <div
              v-if="true"
              style="margin-top: 5px; border: 1px solid #dcdfe6; width: 100%; height: 50%; overflow: hidden;"
          >
            <VueOfficeDocx :src="wordUrl" class="docx-calss" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="questions">

          </div>
        </el-col>
        <el-divider></el-divider>
        <div class="button-container">
          <el-button class="close-button" type="primary" size="large">关闭</el-button>
        </div>
      </el-row>


    </div>
</template>


<script setup lang="ts">
import VueOfficeDocx from "./VueOfficeDocx.vue";

const props = defineProps<{
  wordUrl
}>();

</script>

<style scoped>

.detail-content {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  height: calc(100vh - 20%);
  background-color: #fff;
  padding: 10px;
  overflow: hidden; /* 隐藏滚动条 */
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 使得内容之间有间隔 */
  align-items: center; /* 中心对齐 */
  opacity: 1;
  transition: all 0.5s ease;
}

.button-container {
  margin-bottom: 10px; /* 确保按钮与底部有一定的间隔 */
}

.questions {
  padding: 10px;
  flex-grow: 1; /* 允许问题区域增长以填充可用空间 */
}

.docx-calss {
  height: calc(100% - 60px); /* 减去可能的边距或分隔线高度 */
  overflow: auto; /* 允许在.docx-calss内部滚动 */
}
</style>